<template>
  <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"
import MapboxCommonService from "@/service/map/MapboxCommonService"

export default {
  name: "ViewPerson.component",
  components: {Mapbox},
  setup() {

    let mapStore = ref({});
    let mapOnLoadCB = (map) => {
      mapStore.value = map;

      // 使用variable binding expression 来计算和显示人口密度。
      MapboxCommonService.setCZBP(map, [30.0222, -1.9596], 7);
      map.addLayer({
        'id': 'rwanda-provinces',
        'type': 'fill',
        'source': {
          'type': 'geojson',
          'data': `${window.location.origin}/mapbox-test/libs/mapbox/assets/rwanda-provinces.geojson`
        },
        'layout': {},
        'paint': {
          'fill-color':
              ["let", "density", ["/", ["get", "population"], ["get", "sq-km"]],
                [
                  "interpolate",
                  ["linear"],
                  ["zoom"],
                  8,
                  [
                    "interpolate",
                    ["linear"],
                    ["var", "density"],
                    274,
                    ["to-color", "#edf8e9"],
                    1551,
                    ["to-color", "#006d2c"]
                  ],
                  10,
                  [
                    "interpolate",
                    ["linear"],
                    ["var", "density"],
                    274,
                    ["to-color", "#eff3ff"],
                    1551,
                    ["to-color", "#08519c"]
                  ]
                ]
              ],
          'fill-opacity': .7
        }
      });
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped>

</style>